<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打砖块</title>
    <link rel="shortcut icon" href="砖石.png" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(1369621512606.jpg);
        }

        h1 {
            width: 250px;
            margin: 0 auto;
            font-size: 50px;
            color: lightseagreen;
        }

        #div {
            width: 700px;
            height: 700px;
            border: 15px solid royalblue;
            margin: 50px auto;
            border-radius: 30px;
            position: relative;
        }

        #ball {
            width: 20px;
            height: 20px;
            background: red;
            border-radius: 50%;
            position: absolute;
            bottom: 50px;
            left: 300px;
        }

        #bat {
            width: 100px;
            height: 50px;
            background: white;
            position: absolute;
            bottom: 0;
            left: 300px;
            /* border-radius: 10px; */
        }

        #brick div {
            width: 90px;
            height: 28px;
            border: 2px solid black;
            float: left;
            margin-left: 5px;
            margin-top: 5px;
        }

        #score {
            width: 200px;
            height: 60px;
            border: 6px solid chocolate;
            position: absolute;
            left: 75%;
            top: 250px;
            font-size: 25px;
            color: crimson;
            border-radius: 10px;
            line-height: 60px;
            text-align: center;

        }

        #scoreS {
            color: greenyellow;
        }
    </style>
</head>

<body>
    <h1>打砖块</h1>
    <span id="score">得分为:&nbsp;&nbsp;<b id="scoreS"></b> </span>
    <div id="div">
        <div id="ball"></div>
        <div id="bat"></div>
        <div id="brick"></div>
    </div>
    <script>
        //判断碰撞，如果判断两个物体发生碰撞的时候，正向不好判断的时候，我们就逆向判断
        //不要想两个物体怎么样才能碰上，要想两个物体怎么样才能碰不上
        //思路：找到如何是绝对碰不上的。
        let Div = document.getElementById("div");
        let ball = document.getElementById("ball");
        let Bat = document.getElementById("bat");
        let oBrick = document.getElementById("brick");
        //找到所有的方块
        let oBrickDivs = oBrick.getElementsByTagName("div");
        //计分板初始化

        let scores = 1;
        batX(Bat);
        createBrink(56);
        //让小球在水平方向移动，随机给一个水平方向的值  3~6之间的整数
        let speedX = parseInt(Math.random() * 4) + 3;
        //随机一个垂直方向的值   2~7之间的值
        let speedY = -(parseInt(Math.random() * 3) + 5);

        //让小球在水平方向移动
        let move = setInterval(function () {
            //小球的移动值 = 小球的自身值 + 随机方向值
            ball.style.left = ball.offsetLeft + speedX + "px";
            ball.style.top = ball.offsetTop + speedY + "px";
            //判断是否出界
            if (ball.offsetLeft >= 680 || ball.offsetLeft <= 0) {
                //如果在最边上，让小球反向运动,一直在固定在方框内
                speedX *= -1;
            }
            if (ball.offsetTop <= 0) {
                speedY *= -1;
            }
            if (ball.offsetTop >= 680) {
                if (scoreS.innerHTML <= 5) {
                    alert("游戏结束，您的得分为" + scoreS.innerHTML + "分,您当前的段位是青铜，加油哟！");
                    clearInterval(move);
                    window.history.go(0);
                }
                if (scoreS.innerHTML <= 10 && scoreS.innerHTML > 5) {
                    alert("游戏结束，您的得分为" + scoreS.innerHTML + "分,您当前的段位是白银，继续加油！");
                    clearInterval(move);
                    window.history.go(0);
                }
                if (scoreS.innerHTML <= 15 && scoreS.innerHTML > 10) {
                    alert("游戏结束，您的得分为" + scoreS.innerHTML + "分,您当前的段位是黄金，继续加油！");
                    clearInterval(move);
                    window.history.go(0);
                }
                if (scoreS.innerHTML <= 25 && scoreS.innerHTML > 15) {
                    alert("游戏结束，您的得分为" + scoreS.innerHTML + "分,您当前的段位是铂金，继续加油！");
                    clearInterval(move);
                    window.history.go(0);
                }
                if (scoreS.innerHTML <= 30 && scoreS.innerHTML > 25) {
                    alert("游戏结束，您的得分为" + scoreS.innerHTML + "分,您当前的段位是钻石，不错哟，继续加油！");
                    clearInterval(move);
                    window.history.go(0);
                }
                if (scoreS.innerHTML <= 35 && scoreS.innerHTML > 30) {
                    alert("游戏结束，您的得分为" + scoreS.innerHTML + "分,您当前的段位是皇冠，不错哟，棒棒哒");
                    clearInterval(move);
                    window.history.go(0);
                }
                if (scoreS.innerHTML <= 40 && scoreS.innerHTML > 35) {
                    alert("游戏结束，您的得分为" + scoreS.innerHTML + "分,您当前的段位是王牌，超级棒！");
                    clearInterval(move);
                    window.history.go(0);
                }
                // alert("游戏结束，您的得分为" + scoreS.innerHTML);
            }
            //判断拍子和小球的碰撞
            if (konck(ball, Bat)) {
                //小球碰到拍子后反弹
                speedY *= -1;
            }
            //遍历方块
            for (let i = 0; i < oBrickDivs.length; i++) {
                //找到小球和所碰撞的方块
                if (konck(oBrickDivs[i], ball)) {
                    //碰到方块反弹
                    speedY *= -1;
                    //小球碰到那个方块那个方块消失,30秒之后判断另外一次
                    //消除小方块
                    oBrick.removeChild(oBrickDivs[i]);
                    //分数显示在计分板上
                    scoreS.innerHTML = Number(scores++);
                    if (scoreS.innerHTML == 56) {
                        alert("游戏结束，您的得分为" + scoreS.innerHTML + "分,您当前的段位无敌战神，棒棒哒");
                        window.history.go(0);
                    }
                    break;
                }
            }

        }, 30)

        //拍子移动
        function batX(node) {
            node.onmousedown = function (ev) {
                //水平方向相对的位置 = 鼠标的位置 - node.offsetLeft
                let offsetX = ev.clientX - node.offsetLeft;
                document.onmousemove = function (ev) {
                    //鼠标移动是改变移动的bat随着移动
                    // bat移动的位置 = 鼠标的位置 - offsetX  

                    //当前滑块所移动的位置  ev.clientX - offsetX
                    let l = ev.clientX - offsetX;
                    //判断出界
                    if (l <= 0) {
                        l = 0;
                    }
                    if (l >= 600) {
                        l = 600;
                    }
                    node.style.left = l + "px";
                }
                document.onmouseup = function () {
                    document.onmousemove = "";
                }
            }
        }


        //创建砖块
        //n代表当前创建的方块数
        function createBrink(n) {
            let oBrick = document.getElementById("brick");
            for (let i = 0; i < n; i++) {
                //捏造小方块
                let node = document.createElement("div");
                //小方块的背景颜色随机
                node.style.backgroundColor = randomColor();
                oBrick.appendChild(node);
            }
            //为什么要给每一块方块添加坐标，为了小球碰到方块时，小球虽然消失了，但是方块时浮动，会自动进行排序，到时你所消失的方块的区域被其他的方块重新插入排列到此位置上
            //等把所有的div插入完成之后，拿到小方块
            let oBrickDivs = oBrick.getElementsByTagName("div");
            //给每一块方块添加坐标，通过offsetLeft和offsetTop值得到
            for (let i = 0; i < oBrickDivs.length; i++) {
                oBrickDivs[i].style.left = oBrickDivs[i].offsetLeft + "px";
                oBrickDivs[i].style.top = oBrickDivs[i].offsetTop + "px";
            }
            //在所有小方块都有坐标的情况下，去设置div的position，这样就变成了决定定位
            for (let i = 0; i < oBrickDivs.length; i++) {
                oBrickDivs[i].style.position = "absolute";
            }
        }

        //获取随机颜色值
        function randomColor() {
            let str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(
                Math.random() * 256) + ",1)";
            return str;
        }

        //碰撞问题
        function konck(node1, node2) {
            let l1 = node1.offsetLeft;
            let r1 = node1.offsetLeft + node1.offsetWidth;
            let t1 = node1.offsetTop;
            let b1 = node1.offsetTop + node1.offsetHeight;

            let l2 = node2.offsetLeft;
            let r2 = node2.offsetLeft + node2.offsetWidth;
            let t2 = node2.offsetTop;
            let b2 = node2.offsetTop + node2.offsetHeight;

            if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
                return false;
            } else {
                return true;
            }
        }
    </script>
</body>

</html>